<template>
  <div class="content">
    <!--<TopMsg ref='topmsg'></TopMsg>-->
    <div class="md-layout">
      <div class="md-layout-item md-medium-size-100 md-size-100">
        <form>
          <md-card>
            <md-card-header style="padding:4px;" data-background-color="green">
              <h5 style="margin:0;" class="title">经销商信息</h5>
            </md-card-header>
            <md-card-content>
              <div class="md-layout">

                <edit-item title="经销商*" edittype="S" :mergelen="2">
                  <select v-model="dealerid">
                    <option v-for="option in dealerlist" :value="option.DEALERID" :key="option.DEALERID">{{ option.DEALERNAME }}</option>
                  </select>
                </edit-item>
                <edit-item title="金融机构*" edittype="S" :mergelen="2">
                  <select v-model="fininstid">
                    <option v-for="option in fininstlist" :value="option.FININSTID" :key="option.FININSTID">{{ option.FININSTNAME }}</option>
                  </select>
                </edit-item>
                <edit-item title="客户类型" edittype="R" v-if="customerTypeFlg">
                  <input type="radio" id="yes" value="1" v-model="customerType">个人
                  <input type="radio" id="no" value="2" v-model="customerType">机构
                </edit-item>
              </div>
            </md-card-content>
          </md-card>

          <md-card v-if="preApproveflg">
            <md-card-header style="padding:4px;margin-top:4px;" data-background-color="green">
              <h4 style="margin:0;" class="title">预审批(基本信息)</h4>
            </md-card-header>
            <md-card-content>
              <div class="md-layout">

                <edit-item title="姓名" :mergelen="2">
                  <md-input v-model="preData.indCustomerName" required></md-input>
                </edit-item>
                <edit-item title="身份证号"  :mergelen="2">
                  <md-input v-model="preData.indPaperNo" required></md-input>
                </edit-item>
                <edit-item title="银行卡号"  :mergelen="2">
                  <md-input v-model="preData.indBankAccount" required></md-input>
                </edit-item>
                <edit-item title="婚姻状况" edittype="R" :mergelen="2">
                  <input type="radio" v-model="preData.indMaritalStatus" :value="0"/>未婚
                  <input type="radio" v-model="preData.indMaritalStatus" :value="1"/>已婚
                  <input type="radio" v-model="preData.indMaritalStatus" :value="2"/>丧偶
                  <input type="radio" v-model="preData.indMaritalStatus" :value="3"/>离异
                </edit-item>
                <edit-item title="手机号" :mergelen="2">
                  <md-input v-model="preData.indMobile" required></md-input>
                </edit-item>
              </div>
            </md-card-content>

            <template v-if="preData.indMaritalStatus == '1'" >
              <md-card-header style="padding:4px;margin-top:4px;" data-background-color="green">
                <h5 style="margin:0;" class="title">预审批(配偶基本信息)</h5>
              </md-card-header>
              <md-card-content>
                <div class="md-layout">
                  <edit-item title="配偶姓名" :mergelen="2">
                    <md-input v-model="preData.gua1PartnerName" required ></md-input>
                  </edit-item>
                  <edit-item title="配偶身份证号" :mergelen="2">
                    <md-input v-model="preData.gua1PartnerPaperNo" required maxlength="18"></md-input>
                  </edit-item>
                  <edit-item title="配偶手机号" :mergelen="2">
                    <md-input v-model="preData.gua1Mobile" required maxlength="11"></md-input>
                  </edit-item>
                </div>
              </md-card-content>
            </template>

            <md-card-header style="padding:4px;margin-top:4px;" data-background-color="green">
              <h5 style="margin:0;" class="title">预审批(提交)</h5>
            </md-card-header>
            <md-card-content>
              <div class="md-layout">
                <edit-item title="验证码" :mergelen="2">
                  <md-input v-model="preData.vcode" required></md-input>
                  <md-button class="md-dense md-raised" style="margin:0px;">点击获取</md-button>
                </edit-item>
                <div class="md-layout-item md-small-size-100 text-right md-size-68">
                  <md-checkbox class="radioLabel" v-model="agree">本人已阅读并同意《个人征信授权书》</md-checkbox>
                  <md-button class="md-raised md-success">预审批提交</md-button>
                  <md-button class="md-raised md-success" v-if="skipflg" v-on:click="doskip">跳过</md-button>
                </div>
              </div>
            </md-card-content>
          </md-card>
          <!-- 申请创建 -->
          <template v-if="applyflg">
             <apply-edit-ind v-if="customerType== '1'" :fininstid="fininstid"></apply-edit-ind>
             <apply-edit-org v-if="customerType== '2'"></apply-edit-org>
          </template>

        </form>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/scss/main.scss'
import LabelItem from '@/views/Common/Unit/LabelItem.vue'
import EditItem from '@/views/Common/Unit/EditItem.vue'
import ApplyEditInd from './ApplyEditInd'
import ApplyEditOrg from './ApplyEditOrg'
import { mapActions } from 'vuex'

export default {
  name: 'preApprove',
  components: {
    'label-item': LabelItem,
    'edit-item': EditItem,
    'apply-edit-ind': ApplyEditInd,
    'apply-edit-org': ApplyEditOrg
  },
  data: function () {
    return {
      dealerlist: [], // 经销商list
      dealerid: '',
      fininstlist: [], // 金融机构list
      fininstid: '',
      preApproveflg: undefined, // 需预审批flg
      customerTypeFlg: undefined, // 顾客类型可选flg
      customerType: 1,
      skipflg: undefined, // 可跳过预审批
      applyflg: false, // 显示创建申请
      preData: {},
      agree: 0
    }
  },
  mounted () {
    // 初始经销商列表
    window.common.getDealerList('1').then(data => {
      this.dealerlist = data.dealerlist
    })
  },
  watch: {
    // 经销商变化
    dealerid: function (val) {
      window.common.getFininstList(val).then(data => {
        var lst = data.fininstlist
        this.fininstlist = lst
        this.fininstid = ''
      })
    },

    // 金融机构变化
    fininstid: function (val) {
      if (val === 4 || val === 6) {
        // 车家或皖新：有个人，有机构；没预审批
        this.preApproveflg = false
        this.customerTypeFlg = true
        this.skipflg = false
        this.applyflg = true
      } else if (val === 5) {
        // 晋城：只有个人; 可跳过预审批
        this.preApproveflg = true
        this.customerTypeFlg = false
        this.skipflg = true
        this.applyflg = false
      } else {
        // 其他：只有个人；不可跳过预审批
        this.preApproveflg = true
        this.customerTypeFlg = false
        this.skipflg = false
        this.applyflg = false
      }
    }

  },
  methods: {
    doskip: function () {
      this.preApproveflg = false
      this.applyflg = true
    },
    dosubmit: function () {
      // this.$refs.topmsg.showmg(2,'字段不能为空！')
      this.$store.dispatch('onShowmsg', {type: 1, text: 'hello'})
    },
    ...mapActions(['onShowmsg'])
  }

}
</script>
<style scoped lang="scss">

</style>
